// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import {connect} from 'dva'
// 引入antd的组件
import {Form,Modal} from 'antd'
//导入路由组件，用于跳转等
import {Link, hashHistory} from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
import {get} from 'lodash'
// 引入model取值工具方法
import {mapStateToProps} from 'utils/view_utils'
// 当前组件样式
import styles from './liveStatisticsStyle.less'
import cx from 'classnames';
import Chart from 'widget/Chart/chart';
import BigChart from 'widget/Chart/chartwithsize';
import echarts from "echarts";

// require('../../../../utils/bmap.js');
import Bmap from '../../../../widget/Bmap/Bmaps'

/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const liveStatisticsView = function ({dispatch, model, form}) {

    // 取出model对象，命名空间
    const {modelObj} = model

    let {detail, lineDateList, lineDataList, barDataList, barDuration, geoCoordMap, cityValueMap,provinceData,markers,province,center} = modelObj

    // let script = document.createElement("script");
    // script.src = "https://api.map.baidu.com/api?v=2.0&ak=rGeQywxR5cAzRXXNTyZeeAY1o5Qsndp1&callback=initialize";
    // document.body.appendChild(script);

    if (!detail) {
        detail = {liveLength: '0分钟', watchPersonCount: '0人', watchCount: '0次', watchAvg: '0分钟'}
    }

    const lineoption = {
        title: {
            text: '在线观众分布',
        },
        grid: {
            show: true,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,// 坐标轴两边留白策略
            data: lineDateList,
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            axisLine: {
                onZero: false
            },
            axisLabel: {
                formatter: '{value} 人'
            },
            splitLine: {
                show: false
            }
        },
        dataZoom: [{
            type: 'slider',
            xAxisIndex: 0,
            start: 0,
            end: 100
        }],
        series: [
            {
                name: '观众分布数据',
                type: 'line',
                smooth: true,
                symbol: 'none',
                sampling: 'average',
                itemStyle: {
                    color: '#5599ff'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#5599ff'
                    }, {
                        offset: 1,
                        color: '#5599ff'
                    }])
                },
                data: lineDataList
            }
        ]
    };

    const baroption = {
        title: {
            text: '观众时长分析',
        },
        color: ['#5599ff'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            show: true
        },
        xAxis: [
            {
                type: 'category',
                data: barDuration,
                axisTick: {
                    alignWithLabel: true
                },
                splitLine: {
                    show: false
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLine: {
                    onZero: false
                },
                axisLabel: {
                    formatter: '{value} 人'
                },
            }
        ],
        series: [
            {
                name: "人",
                type: 'bar',
                symbolSize: [20, 30],
                symbolOffset: [0, -40],
                color: '#5599ff',
                symbolPosition: 'end',
                splitLine: {
                    show: false
                },
                label: {
                    show: true,
                    position: "top",
                    formatter: function (params) {
                        return barDataList[params.dataIndex]
                    },
                    fontSize: 20,
                    color: '#5599ff'
                },
                data: barDataList
            }
        ]
    };

    let convertData = function (data, sort) {
        let res = [];
        if (!data) {
            return res;
        }
        if (sort) {
            data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 6);
        }
        for (let i = 0; i < Object.keys(data).length; i++) {
            let geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };

    const op = {
        title: {
            text: '地区分布',
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                return params.name + ' : ' + params.value[2] + '观看次数';
            }
        },
        bmap: {
            center: [104.114129, 37.550339],
            zoom: 5,
            roam: false,
            mapStyle: {
                styleJson: [{
                    'featureType': 'water',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'land',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#f3f3f3'
                    }
                }, {
                    'featureType': 'green',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                }, {
                    'featureType': 'local',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                }, {
                    'featureType': 'boundary',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#fefefe'
                    }
                },  {
                    'featureType': 'label',
                    'elementType': 'labels.text.fill',
                    'stylers': {
                        'color': '#999999'
                    }
                }]
            }
        },
        series: [
            {
                type: 'scatter',
                coordinateSystem: 'bmap',
                data: convertData(cityValueMap, false),
                symbolSize: function (val) {
                    return val[2] / 5;
                },
                itemStyle: {
                    color: 'purple'
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            {
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                data: convertData(cityValueMap, true),
                symbolSize: function (val) {
                    return val[2] / 5;
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                itemStyle: {
                    color: 'purple',
                    shadowBlur: 10,
                    shadowColor: '#333'
                },
                zlevel: 1
            }
        ]
    };
    return (
        <div className={cx('pageLayout')} className={styles.detail}>
            <div className={styles.statistics}>
                <div className={styles.title}>直播概况</div>
                <div className={styles.basic_list}>
                    <ul>
                        <li>
                            <div className={styles.basic_list_t}>直播时长</div>
                            <div className={styles.basic_list_n}>{detail.liveLength}</div>
                        </li>
                        <li>
                            <div className={styles.basic_list_t}>观看人数</div>
                            <div className={styles.basic_list_n}>{detail.watchPersonCount}</div>
                        </li>
                        <li>
                            <div className={styles.basic_list_t}>观看次数</div>
                            <div className={styles.basic_list_n}>{detail.watchCount}</div>
                        </li>
                        <li>
                            <div className={styles.basic_list_t}>平均观看时长</div>
                            <div className={styles.basic_list_n}>{detail.watchAvg}</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div className={styles.statistics}>
                <Chart Option={lineoption}></Chart>
            </div>
            <div className={styles.statistics}>
                <Chart Option={baroption}></Chart>
            </div>
            <div className={styles.statistics}>
                <div className={styles.title}>直播间观众分布图</div>
                <Bmap value={center} center={center} markers={markers} province={province} provinceData={provinceData}/>
                {/* <BigChart Option={op}></BigChart> */}

            </div>

        </div>
    )
}
export default connect(mapStateToProps)(Form.create()(liveStatisticsView))
